import React from 'react';
import Api from 'Utils/api';
import moment from 'moment/moment';
import { connect } from 'react-redux';
import { API_HOST } from 'Constants/config';
import { Button, Icon, message } from 'antd';
import VR_TYPE from 'Constants/vrType';
import CommonBorder from './../../../../DispatchPage/Components/CommonBorder';
import './index.scss';

const $ = require('jquery');

class EditPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      id: props.params.id,
      reportsDetail: [],
    };
    this.init = ::this.init;
    this.showState = ::this.showState;
    this.onPrint = ::this.onPrint;
    this.renderAudio = ::this.renderAudio;
  }
  componentDidMount() {
    this.init();
  }
  init() {
    const { id } = this.state;
    const api = new Api({
      method: 'GET',
      path: `/reports/admin/${id}`,
      success: (json) => {
        this.setState({
          reportsDetail: json,
        });
      },
      error: (msg) => {
        message.error(msg);
      }
    });
    api.run();
  }
  onPrint() {
    const area = $('div#detailBody');
    const options = {
      mode: 'iframe',
      popClose: false,
      extraCss: '',
      retainAttr: ['class', 'id', 'style', 'on'],
      extraHead: '<link type="text/css" rel="stylesheet" href="./bundle1.css" /> <link type="text/css" rel="stylesheet" href="./bundle2.css" /> ',
    };
    area.printArea(options);
  }
  showState() {
    const { reportsDetail } = this.state;
    if (reportsDetail.handle_state === 0) {
      return '未处理';
    }
    if (reportsDetail.handle_state === 1) {
      return '处理中';
    }
    return '已处理';
  }
  renderAudio() {
    const { reportsDetail } = this.state;
    if (reportsDetail.report_type === 'audio') {
      return (
        <div className="item">
          <span>音频：</span>
          <span className="audio-wrap">
            <audio controls preload className="audio">
              {reportsDetail.video_audio &&
              <source src={`${API_HOST}/files/${reportsDetail.video_audio}`} type="audio/mp3" />
              }
            </audio>
          </span>
        </div>
      );
    } else if (reportsDetail.report_type === 'video') {
      return (
        <div className="item">
          <span>视频：</span>
          <span className="video-wrap">
            <video controls preload className="video">
              {reportsDetail.video_audio &&
              <source src={`${API_HOST}/files/${reportsDetail.video_audio}`} type="video/mp4" />
              }
            </video>
          </span>
        </div>);
    }
    return '';
  }
  renderAttachment() {
    const { reportsDetail } = this.state;
    if (reportsDetail.attachment_type === VR_TYPE.video) {
      return (
        <video controls preload className="video-ele">
          <source src={`${API_HOST}/files/${reportsDetail.attachment}`} type="video/mp4" />
        </video>
      );
    } else if (reportsDetail.attachment_type === VR_TYPE.img) {
      return (
        <img src={`${API_HOST}/files/${reportsDetail.attachment}`} alt="" className="img-ele" />
      );
    }
    return '';
  }
  render() {
    const { reportsDetail } = this.state;
    return (
      <CommonBorder
        title="投诉举报详情"
        content={
          <div className="advice-detail-page">
            <div className="advice-detail-content" id="detailBody">
              <div className="item">
                <span>标题：</span>
                <span>{reportsDetail.title}</span>
              </div>
              <div className="item">
                <span>投诉对象：</span>
                <span>{reportsDetail.report_target}</span>
              </div>
              <div className="item">
                <span>内容：</span>
                <span>{reportsDetail.content}</span>
              </div>
              <div className="item">
                <span>举报人：</span>
                <span>{reportsDetail.reporter}</span>
              </div>
              <div className="item">
                <span>是否匿名：</span>
                <span>{reportsDetail.is_anonymity ? '是' : '否'}</span>
              </div>
              <div className="item">
                <span>身份证：</span>
                <span>{reportsDetail.id_no}</span>
              </div>
              <div className="item">
                <span>联系电话：</span>
                <span>{reportsDetail.phone}</span>
              </div>
              {
                reportsDetail.report_type && this.renderAudio()
              }
              <div className="item appendix-wrap">
                <span>附件：</span>
                <span className="doc">
                  {
                    reportsDetail.attachment && reportsDetail.attachment_type ? this.renderAttachment() : ''
                  }
                </span>
              </div>
              <div className="item">
                <span>举报时间：</span>
                <span className="doc">{moment(reportsDetail.create_time).format('YYYY-MM-DD')}</span>
              </div>
              <div className="item">
                <span>状态：</span>
                <span>{this.showState()}</span>
              </div>
              <div className="item">
                <span>是否公开：</span>
                <span>{reportsDetail.is_shown ? '是' : '否'}</span>
              </div>
            </div>
            <Button className="right-btn" onClick={this.onPrint}>
              <Icon type="printer" />
              打印
            </Button>
          </div>
        }
      />
    );
  }
}


function mapStateToProps(state) {
  return {
    ...state.routing,
  };
}

export default connect(mapStateToProps)(EditPage);
